<template>
  <div class="cms-views-container consumer-detail-pages">
    <header class="h-10 leading-10 px-4 text-center w-full">
      <span class="float-left">
        <LeftOutlined class="text-base" />
      </span>
      <span class="text-base text-[#333] font-medium">消费明细</span>
    </header>
    <div class="mt-4 mx-4 px-4 cusumer-total h-[92px] pt-4">
      <span class="text-black text-xs">总消费</span>
      <h3 class="m-0 p-0 text-[#ff613f] text-[35px] font-semibold"><span class="text-xl font-normal">￥</span>299</h3>
    </div>
    <div class="px-4 pt-4">
      <div
        v-for="(item, index) in consumList"
        :key="index"
        class="consumer-item mb-4 pl-5 pr-4 flex items-center justify-between h-[76px]"
      >
        <span class="flex items-center">
          <img :src="mineIcons.icon_purchases" alt="" class="w-6 h-6" v-if="item.title === '金币充值'" />
          <img :src="mineIcons.vip_member" alt="" class="w-6 h-6" v-else />
          <span class="pl-[23px]">
            <h3 class="text-black text-sm">{{ item.title }}</h3>
            <i class="not-italic text-xs text-[#8f9299]">{{ item.time }}</i>
          </span>
        </span>
        <span class="text-black font-medium"
          ><i class="not-italic item-moeny">￥</i><span class="text-sm">{{ item.money }}</span></span
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import mineIcons from '../assets/mine'

const consumList = [
  {
    imgUrl: '',
    title: '金币充值',
    time: '2022-04-23 14:28',
    money: '100.00'
  },
  {
    imgUrl: '',
    title: 'VIP会员',
    time: '2022-04-23 14:28',
    money: '20.00'
  },
  {
    imgUrl: '',
    title: '金币充值',
    time: '2022-04-23 14:28',
    money: '100.00'
  },
  {
    imgUrl: '',
    title: 'VIP会员',
    time: '2022-04-23 14:28',
    money: '100.00'
  }
]
</script>

<style scoped lang="less">
.consumer-detail-pages {
  .cusumer-total {
    background: rgba(255, 97, 63, 0.07);
    border: 1px solid #ffab99;
    border-radius: 8px;
  }
  .consumer-item {
    box-shadow: 1px 1px 20px 0 rgba(85, 85, 85, 0.09);
    @apply rounded-lg;
    .item-moeny {
      font-size: 9px;
    }
  }
}
</style>
